<template>
	<div class="song-list">
		<u-cell :title="title" :titleStyle="{ fontWeight: '700' }" :isLink="true" value="更多" center :border="false"></u-cell>
		<div class="items">
			<block v-for="(item, index) in transferData" :key="item.id">
				<div class="item" @click="$u.route(`/pages/listv2/index?id=${item.id}`)">
					<div class="js-img">
						<image :src="pictureSize(item.coverImgUrl, 200, 200) || ''"></image>
						<div class="play-counter">{{ formatCount(item.playCount, 100, 100) }}</div>
					</div>
					<text class="u-line-2">{{ item.name }}</text>
				</div>
			</block>
		</div>
	</div>
</template>

<script>
import { formatCount } from '@/utils/formatCount.js';
import { pictureSize } from '@/utils/pictureSize.js';
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		transferData: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {};
	},
	methods: {
		formatCount,
		pictureSize
	}
};
</script>

<style lang="scss" scoped>
/deep/ .u-cell__body {
	padding: 20rpx 0;
}
.items {
	display: flex;
	overflow-y: auto;
}
.song-list {
	.item {
		height: 300rpx;
		margin-right: 20rpx;
		.js-img {
			position: relative;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
			.play-counter {
				position: absolute;
				bottom: 8rpx;
				right: 0;
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				font-size: 18rpx;
				padding: 2rpx 8rpx;
				border-radius: 4rpx;
			}
		}
		text {
			font-size: 22rpx;
		}
	}
}
</style>
